<template>
	<view>
		<!-- 背景图片 -->
		<view class="back-img">
			<image :src="topicinfo.img" mode=" aspectFill" lazy-load></image>
		</view>
		<!-- 内容 -->
		<view class="topic-info">
			<view class="topic-info-top u-f-ac">
				<image :src="topicinfo.img" mode="widthFix" lazy-load=""></image>
				<view class="topic-info-top-text">
					{{topicinfo.title}}
				</view>
			</view>
			<view class="topic-info-center">
				动态 {{topicinfo.newnum}}  今日 {{topicinfo.todaynum}}
			</view>
			<view class="topic-info-bottom">
				{{topicinfo.text}}
			</view>
		</view>
		
	</view>
</template>

<script>
	export default{
	props:{
		topicinfo:Object
	}	
	}
</script>

<style scoped>
	.back-img{
		width: 100%;
		height: 300upx;
		overflow: hidden;
	}
	.back-img image{
		width: 100%;
		height: 300upx;
		position: absolute;
		filter: blur(10px);
	}
	.topic-info-center{
		color: #CECECE;
		font-size: 25upx;
	}
	.topic-info-top-text{
		margin-left: 20upx;
		font-size: 35upx;
		color: #000000;
		padding-bottom: 15upx;
	}
	.topic-info-bottom{
		color: #A3A3A3;
		margin-top: 20upx;
	}
	.topic-info{
		padding: 0px 17upx;
	}
	.topic-info-top image{
		width: 150upx;
		height: 200upx;
		position: relative;
		top: -55upx;
		border-radius: 10upx;
		
		
	}
</style>
